<template>
  <div>
    <a href="/" >首页</a>

   <div style="width: 40%;margin: 0 auto;">

     <el-card >
       <h1> 登录页面</h1>
       <el-form label-width="80px">
         <el-form-item label="用户名" >
           <el-input placeholder="请输入用户名" v-model="user.username"/>
         </el-form-item>
         <el-form-item label="密码" >
           <el-input placeholder="请输入密码" v-model="user.password" type="password"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="login()">登录</el-button>
         </el-form-item>
       </el-form>
     </el-card>
   </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    }
  },
  methods: {
    login() {
      console.log(this.user)
      let url = this.BASE_URL + "/v1/users/login"
      this.axios.post(url,this.user).then(response=>{
        if(response.data.code == 10001){
          console.log(response.data.data)
          this.user = response.data.data
          //将登录成功后的数据放在本地存储中
          localStorage.setItem('user',JSON.stringify(this.user))
          //跳转到首页
          this.$router.push('/')
        }else{
          this.$message.error(response.data.msg)
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
